<template>
  <van-overlay
    :show="overlayShow"
    z-index="999">
    <div class="audio-details">
      <div
        class="close geek-icon"
        @click.stop="overlayShow = false">
        &#xe656;
      </div>

      <img
        :src="props.audioList[aIndex].imgUrl"
        class="bg-img"
        alt="" />
      <!-- 背景 -->
      <div class="audio-bg">
        <img
          :src="props.audioList[aIndex].imgUrl"
          :class="{ rotate: paused }"
          alt="" />
      </div>
      <!-- 信息 -->
      <div class="info">
        <div class="name">{{ props.audioList[aIndex].name }}</div>
        <!-- <div class="tags">
          <span>标签1</span>
          <span>标签2</span>
        </div> -->
      </div>
      <!-- 播放器 -->
      <div class="container">
        <audio
          v-show="false"
          ref="audio"
          controls
          :src="audioSrc"
          @timeupdate="updateTime"
          @ended="ended"
          @canplay="getDuration"></audio>
        <!-- 进度条 -->
        <div class="card">
          <!-- 时间 -->
          <div class="time">
            <span class="startTime">{{ currentDuration }}</span>
            <div
              ref="progress"
              class="progress"
              @click="clickProgress">
              <span
                ref="circle"
                class="circle"
                @mousedown="handleMousedown"></span>
            </div>
            <span class="endTime">{{ duration }}</span>
          </div>
        </div>
      </div>
      <!-- 播放按钮 -->
      <div class="option">
        <div
          v-if="props.audioList.length > 1"
          class="geek-icon button"
          @click="next(-1)">
          &#xe8ed;
        </div>
        <div
          class="play-video geek-icon"
          :class="{ paused: paused }"
          @click="handlePauseOrPlay">
          <span>{{ paused ? '&#xe6ec;' : '&#xe6d1;' }}</span>
        </div>
        <div
          v-if="props.audioList.length > 1"
          class="geek-icon button"
          @click="next(1)">
          &#xe8ec;
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import route from '@/router';
interface Props {
  audioList?: any;
  audioIndex?: number;
  remove?: Function;
}
const overlayShow = ref(true);
const props = withDefaults(defineProps<Props>(), {
  audioList: [],
  audioIndex: 0,
  remove: Function
});

// 当前位置
const aIndex = ref(0);

watch(
  () => overlayShow.value,
  (val) => {
    !val && props.remove();
  }
);
// 路由变化时关闭组件
watch(
  () => route,
  () => {
    overlayShow.value = false;
    props.remove();
  },
  {
    deep: true
  }
);

const paused = ref(false);

const audio = ref();
const progress = ref();

const circle = ref();

// 是否在移动中
const isMoveIn = ref(false);

const audioSrc = ref<string>();

// 时间
const duration = ref('00:00');

const currentDuration = ref('00:00');
// 时间单位秒的的时间转换成mm:ss的形式
const timeFormat = (number: number): string => {
  let minute: any = Math.floor(number / 60);
  let second: any = Math.floor(number % 60);
  minute = minute >= 10 ? minute : `0${minute}`;
  second = second >= 10 ? second : `0${second}`;
  return `${minute}:${second}`;
};
const ended = () => {
  audio.value.play();
  paused.value = true;
};
// 进度条发生变化时触发
const updateTime = () => {
  if (!progress.value) {
    return;
  }
  currentDuration.value = timeFormat(audio.value.currentTime);
  // 如果不是正在移动 和 没有暂停播放就执行
  if (!isMoveIn.value || !audio.value.paused) {
    // 设置当前时间
    const MoveX = progress.value.clientWidth * (audio.value.currentTime / audio.value.duration);
    circle.value.style.width = `${MoveX}px`;
  }
};

// 视频在可以播放时触发
const getDuration = () => {
  duration.value = timeFormat(audio.value.duration);
};

// 更新进度
const updateProgress = (MoveX: any) => {
  // 当前移动的位置 = 当前移动的位置 / 当前进度条的可视长度
  // progress.value.clientWidth 注意一定要拿总长度 否则会拿进度条已经走过的长度
  const clickProgress: any = MoveX / progress.value.clientWidth;
  // 设置播放的时间 = 总时长 * 当前点击的长度
  audio.value.currentTime = audio.value.duration * clickProgress;
  // 设置移动的位置
  circle.value.style.width = `${MoveX}px`;
};

// 点击进度条更新进度
const clickProgress = (e: any) => {
  // 如果不是正在移动 和 没有暂停播放就执行
  if (!isMoveIn.value || audio.value.paused) {
    updateProgress(e.offsetX);
  }
};

// 调整进度
const handleMousedown = () => {
  audio.value.pause();
  paused.value = true;
  isMoveIn.value = true;
  // 进度条 左 边距离页面左边的距离 移动最小值
  const moveMin = progress.value.offsetParent.offsetLeft + progress.value.offsetLeft;
  // 进度条 右 边距离页面左边的距离 移动最大值

  const moveMax = progress.value.offsetParent.offsetLeft + progress.value.offsetLeft + progress.value.clientWidth;
  // 小圆圈的宽度
  const circleWidth = circle.value.clientWidth / 2;

  const moveX = (e: any) => {
    if (e.pageX >= moveMax) {
      return;
    } else if (e.pageX <= moveMin) {
      return;
    }
    circle.value.style.width = `${e.pageX - moveMin - circleWidth}px`;
    updateProgress(e.pageX - moveMin);
  };
  // 获取当前鼠标的位置 X
  document.addEventListener('mousemove', moveX);
  // 鼠标弹起来
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveX);
    audio.value.play();
  });
};

// 暂停或播放
const handlePauseOrPlay = () => {
  audio.value.paused ? audio.value.play() : audio.value.pause();
  paused.value = !paused.value;
};

// 上一个下一个
const next = (num: number) => {
  const length = props.audioList.length - 1;
  aIndex.value += num;
  if (aIndex.value > length) {
    aIndex.value = 0;
  }
  if (aIndex.value < 0) {
    aIndex.value = length;
  }
  console.log(aIndex.value);
  audioSrc.value = props.audioList[aIndex.value].url;
  audio.value.load();
  setTimeout(() => {
    audio.value.play();
    paused.value = true;
  }, 200);
};
watch(
  () => props.audioList,
  (val) => {
    audioSrc.value = val[props.audioIndex].url;
    aIndex.value = props.audioIndex;
    setTimeout(() => {
      handlePauseOrPlay();
    }, 500);
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.close {
  font-size: 28px;
  color: #fff;
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 20;
}
.audio-details {
  height: 100vh;
  overflow: hidden;
  position: relative;
  .bg-img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.1);
  }
  .audio-bg {
    margin: 20% auto;
    position: relative;
    width: 650px;
    height: 650px;
    background: url('@/assets/images/culture/audio-bg.png') no-repeat center;
    background-size: 100%;
    text-align: center;
    line-height: 650px;
    img {
      width: 480px;
      height: 480px;
      border-radius: 50%;
    }
    .rotate {
      animation: rotation 8s linear infinite;
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
  .info {
    padding: 0 40px;
    .name {
      font-size: 36px;
      font-weight: Bold;
      color: #fff;
    }
    .tags {
      margin-top: 24px;
      span {
        color: #fff;
        border: solid 1px #fff;
      }
    }
    .more {
      margin: 40px auto 0;
      font-size: 24px;
      color: #fff;
      width: 156px;
      height: 60px;
      background-color: rgb(#fff, 0.2);
      border-radius: 5px;
      text-align: center;
      line-height: 60px;
    }
    .operation {
      display: flex;
      justify-content: space-between;
      padding: 99px 33px 0;
      > div {
        position: relative;
        i {
          font-size: 40px;
          color: #fff;
        }
        .num {
          position: absolute;
          color: #fff;
          font-size: 20px;
          right: -30px;
          top: 0;
        }
      }
    }
  }
  .player {
    padding: 0 40px;
    margin-top: 78px;
    .progress-bar {
      display: flex;
      align-items: center;
      .first-time,
      .last-time {
        font-size: 20px;
        color: #fff;
      }
      .line {
        margin: 0 16px;
        flex: 1;
        height: 4px;
        background-color: rgb(255, 255, 255, 0.2);
        border-radius: 2px;
        position: relative;
        .new-line {
          position: absolute;
          width: 100%;
          left: 0;
          height: 4px;
          background: #fff;
          &::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: #ffffff;
            border-radius: 50%;
            right: 0;
            top: 50%;
            margin-top: -8px;
          }
        }
      }
    }
  }
}
.card {
  width: 100%;
  padding: 70px 40px 40px;
  border-radius: 10px;
  .progress {
    height: 4px;
    border-radius: 2px;
    margin: 0 16px;
    flex: 1;
    background: rgb(#fff, 0.2);
    cursor: pointer;
    position: relative;
    .circle {
      position: absolute;
      left: 0;
      top: -0;
      display: inline-block;
      width: 0;
      height: 4px;
      border-radius: 2px;
      background: #fff;
      &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 16px;
        height: 16px;
        background-color: #ffffff;
        border-radius: 50%;
        top: 50%;
        margin-top: -8px;
      }
    }
  }
  .time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    line-height: 1;
    font-size: 20px;
  }
}
.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 180px;
  padding: 40px;
  .button {
    font-size: 47px;
    color: #fff;
  }
  .play-video {
    font-size: 36px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-indent: 5px;
  }
  .paused {
    text-indent: 0;
  }
}
</style>
